<template>
  <el-container>
    <el-main>
      <el-card v-if="article" class="article-detail">
        <h1>{{ article.title }}</h1>
        <p>{{ article.content }}</p>
      </el-card>
      <div v-else class="no-data">文章不存在</div>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import axios from '../axios'
import { Article } from '../types/Article'

const article = ref<null | Article>(null)

const route = useRoute()

const fetchArticles = async () => {
  try {
    const { id } = route.params
    const resp = await axios.get<Article>(`/articles/${id}`)
    article.value = resp.data
  } catch (error) {
    console.error(error)
  }
}
onMounted(fetchArticles)
</script>

<style scoped>
.article-detail {
  margin: 20px 0;
}

.no-data {
  text-align: center;
  font-size: 1.2em;
  color: #999;
}
</style>
